<template>
  <div class="container">
    <a-carousel
        class="mt-4"
        :style="{
        width: '100%',
        height: '90%'
      }"
        direction="vertical"
        indicator-type="never"
        indicator-position="right"
    >
      <a-carousel-item>
        <div class="leftBox" style="margin-top: -90px">
          <div class="leftSmallBox">
            <div class="leftBottomBox">
              <p style="color: white">立刻开始</p>
              <h1 style="color: white">欢迎使用公务用车管理系统后台</h1>
              <p style="color: white">请登录</p>
              <a-tabs>
                <a-tab-pane key="1" title="登录">
                  <a-form
                      :model="loginForm"
                      class="login-form"
                      layout="vertical"
                      @submit="handleLogin"
                  >
                    <a-form-item label="账号">
                      <a-input v-model="loginForm.username" placeholder="请输入您的管理员账号" class="inputS">
                        <template #suffix>
                          <icon-phone size="16px"/>
                        </template>
                      </a-input>
                    </a-form-item>
                    <a-form-item label="密码">
                      <a-input-password v-model="loginForm.password" placeholder="请输入您的密码" class="inputS"/>
                    </a-form-item>
                    <a-row class="flex align-justify-center">
                      <a-button class="buttonS" type="primary" html-type="submit">
                        登&nbsp;录
                      </a-button>
                    </a-row>
                  </a-form>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </a-carousel-item>
    </a-carousel>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {Message} from "@arco-design/web-vue";
import {getUserInfo, login} from "@/api/userMG";
import router from "@/router"; // 引入axios库

const loginForm = ref({
  username: '',
  password: ''
});

const handleLogin = async (event) => {
  try {
    const token = await login({
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    if (token !== undefined && token !== "") {
      // 登录成功，保存token并跳转
      localStorage.setItem('token', token);
      const res = await getUserInfo()
      if (res.roleWbxqy === "M") {
        // 此处添加跳转逻辑，例如跳转到首页
        Message.success('登录成功');
        await router.push('/user');
      } else {
        Message.error("非管理员")
        localStorage.clear()
      }
    } else {
      // 登录失败，提示用户
      Message.error('登录失败，用户名或密码错误');
    }
  } catch (error) {
    console.error('登录出错', error);
    Message.error('登录出错，请稍后再试');
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #111;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;

  /* 设置背景图片 */
  background-image: url('back.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.leftBox {
  width: 50%;
  display: flex;
  justify-content: center;
}

.leftBottomBox {
  height: 75%;
}

.leftSmallBox {
  margin-top: 20%;
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.buttonS {
  height: 50px;
  width: 200px;
  border-radius: 20px;
}

.inputS {
  height: 50px;
  width: 100%;
  border-radius: 20px;
}

.drag {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}

.top-sys-btn {
  cursor: pointer;
  padding: 8px 12px;
}
</style>
